<template>
    <div class="table">
        <el-table :data="list" style="width: 100%" height="480px">
            <el-table-column :width="item.width ? item.with : 125" v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label" width="180" />
        </el-table>
        <el-pagination layout="prev, pager, next" :total="80" @current-change ="changePage" />
    </div>
</template>


<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

const list = ref([])

const tableLabel=reactive([
    {
        prop:'name',
        label:'姓名'
    },
    {
        prop:'age',
        label:'年龄'
    },
    {
        prop:'sexLabel',
        label:'性别'
    },
    {
        prop:'birth',
        label:'出生日期',
        width:200,
    },
    {
        prop:'addr',
        label:'地址',
        width:320,
    },
])
// 分页
const config = reactive({
    total:0,
    page:1,
    name:'',
})

// 上下文
const { proxy } = getCurrentInstance()
// 获取表格数据
const getUserData = async (config) => {
    let res = await proxy.$api.getUserData(config)
    // console.log(res);
    list.value=res.list.map((item)=>{
        item.sexLabel= item.sex === 0 ? '女' : '男'
        return item
    })
}

// 分页器页数
const changePage =(page)=>{
    // console.log(page);
    config.page =page
    getUserData(config)
}

onMounted(() => {
    // 获取表格数据
    getUserData(config)
})

// 获取user数据







</script>